<template>
    <div class="page user-profiles-view">
        <wv-header title="个人中心" fixed>
            <div class="btn-back" slot="left">
                <i class="iconfont iot-back" @click="$router.go(-1)"></i>
            </div>
            <div class="btn-menu" slot="right">
                <span @click="logout">注销</span>
            </div>
        </wv-header>

        <div class="main-header-fixed">
           <div class="person-info-box">
               <div class="avatar">
                   <i class="iconfont iot-person"></i>
               </div>
               <div class="info">
                   <div class="info-name">{{ user.name }}</div>
                   <div class="info-tip">{{ user.full_address }}</div>
               </div>
               <div class="nav-right">
                   <span class="user-sign-in" @click="signInGiveScore"><span>{{ signText }}</span></span>
               </div>
           </div>
        </div>

        <wv-group class="nav-group">
            <wv-cell title="我的钱包" :is-link="true" url="/webapp/?#/user/charge" :value="user.balance + '元'">
                <i class="iconfont iot-yue " slot="icon"></i>
            </wv-cell>
            <wv-cell title="我的积分" :is-link="true" url="/webapp/?#/user/score" :value="user.score + '个'">
                <i class="iconfont iot-score " slot="icon"></i>
            </wv-cell>
            <wv-cell title="我的订单" is-link to="/order/list">
                <i class="iconfont iot-order" slot="icon"></i>
            </wv-cell>
            <wv-cell v-if="isWeixinBrowser" @click="scanQRCode" title="扫码充电">
                <i class="iconfont iot-saoma" slot="icon"></i>
            </wv-cell>
            <wv-cell @click="showInviteCode" class="invite-cell" title="邀请码" :is-link="false"  :value="inviteUserTips + ' ' + user.my_invite_code">
                <i class="iconfont iot-invite " slot="icon"></i>
            </wv-cell>
        </wv-group>

        <tabbar></tabbar>
    </div>
</template>

<style>
    .invite-cell .weui-cell__ft {
        font-size: 14px;
    }
</style>

<script>
    import tabbar from '../tabbar.vue';
    import { mapState } from 'vuex';
    import util from '@/libs/util';

    export default {
        components: {
            tabbar
        },

        data () {
            return {
                isWeixinBrowser: util.isWeixinBrowser(),
                signText: '签到送积分',
                inviteUserTips: ''
            }
        },

        computed: {
            ...mapState({
                user: state => state.user.user
            })
        },

        created () {
            this.updateUserInfo();

            if (this.user.invite_user_status == true) {
                this.inviteUserTips = `(奖励积分${this.user.invite_give_score_num}个)`;
            }
        },

        methods: {
            updateUserInfo () {
                let that = this;
                util.api().get('/api/user').then((resp) => {
                    if (resp.data.status == true) {
                        if (resp.data.data.is_signed_in == true) {
                            that.signText = '已签到';
                        }
                        that.$store.dispatch('setUser', resp.data.data);
                    }
                }).catch((e) => {
                    util.handleApiException(e, this, '获取用户信息失败');
                });
            },

            showInviteCode () {
                this.$root.modal(`<span style="letter-spacing: 2px; font-size: 16px; color: #ff3d4a;background: #f2f2f2;padding: 5px;">${this.user.my_invite_code}</span>`,
                    '我的邀请码', '知道了');
            },

            logout () {
                this.$store.commit('logout');
                this.$router.push({ name: 'login' });
            },

            signInGiveScore () {
                let that = this;
                if (this.user.is_signed_in == false) {
                    util.api().post('/api/user/sign/score').then((resp) => {
                        if (resp.data.status == true) {
                            that.$root.toast('签到成功，积分+' + resp.data.data.score);
                            that.updateUserInfo();
                        } else {
                            that.$root.error(resp.data.message);
                        }
                    }).catch((e) => {
                        util.handleApiException(e, this, '签到失败');
                    });
                }
            },

            scanQRCode () {
                const that = this;

                if (wx) {
                    wx.scanQRCode({
                        needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                        scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                        success: function (res) {
                        }
                    });
                }
            }
        }
    }
</script>